<template>
	<div class="index">
		<el-row :gutter="30">
			<el-col class="index-head" :span="24">
				<el-col :lg="18" :xl="20">
					<div class="index-head-left">包库缴费</div>
					<div class="quick-entrance">
						<ul>
							<li class="quick-entrance-item">快捷入口：</li>
              <li class="quick-entrance-item">
								<router-link to="/income/stupayment">报名</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/income/simulationfee">模拟</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/income/extrafee">加时</router-link>
							</li>
						</ul>
					</div>
				</el-col>
			</el-col>
		</el-row>
		<el-row :gutter="30">
			<el-col :lg="18" :xl="20" class="my-artcle">
				<!-- car select -->
        		<carSelect @onSelect="selectCarInfor"></carSelect>
				<div class="pay-method">
					<div class="pay-method-con">
						<el-form labelPosition="right" label-width="180px" :model="form" class="quane-pay" :rules="rules" ref="form">
							<el-form-item label="支付方式：">
								<el-radio-group v-model="form.paymentMethod">
									<el-radio label="3">现金</el-radio>
									<el-radio label="4">刷卡</el-radio>
									<el-radio label="1">支付宝</el-radio>
									<el-radio label="2">微信</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="类型：">
								<el-radio-group v-model="form.paymentType">
									<el-radio label="1">押金</el-radio>
									<el-radio label="2">管理费</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="金额：" prop="contractCost">
								<el-input class="pay-method-ipt total padding-right" v-model="form.contractCost" :maxlength="5"></el-input>
							</el-form-item>
							<el-form-item label="包库人：" prop="contractor">
								<el-input class="pay-method-ipt" v-model="form.contractor"></el-input>
							</el-form-item>
							<el-form-item label="承包使用期：" class="endtime" prop="time">
								<div class="block">
									<el-date-picker class="pay-method-time" 
										v-model="form.time" 
										type="daterange" 
										range-separator="-" 
										start-placeholder="开始日期"
										end-placeholder="结束日期" 
										@change="handleChange"
										format="yyyy 年 MM 月 DD 日"
										value-format="yyyy-MM-dd">
									</el-date-picker>
								</div>
							</el-form-item>
							<input type="button" class="submit-btn" value="提   交" @click="submitForm">
						</el-form>
					</div>
				</div>
			</el-col>
			<el-col :lg="6" :xl="4">
				<div class="studnet-information">
				<p class="student-select-title">车辆信息</p>
				<img class="no-message" v-if="!carInfor.plateNumber" src="static/img/no-message.jpg" alt="暂无消息">
				<div v-else-if="carInfor.plateNumber">
					<div class="carID"><span class="carID-line">{{carInfor.plateNumber}}</span></div>
					<p class="line"></p>
					<ul>
					<!-- <li class="stuInfo-item">本月油气消费总额：￥{{carInfor.totleCost}}</li>
					<li class="stuInfo-item">本月加油气次数：{{carInfor.fuelNum}}</li>
					<li class="stuInfo-item">本月里程总计：570km</li>
					<li class="stuInfo-item">本月日均油气消费额：￥{{carInfor.averageDailyCost}}</li> -->
					</ul>
					<p class="fresh-date">数据更新日期：{{$moment().format("YYYY-MM-DD")}}</p>
				</div>
				</div>
			</el-col>
		</el-row>
		<!-- 信息确认 -->
		<confirm v-model="confirmShow" title="加时费信息确认" @onSubmit="submit">
			<submit-item label="包库人" :value="form.contractor"></submit-item>
			<submit-item label="车牌号" :value="carInfor.plateNumber"></submit-item>
			<!-- <submit-item label="性别" :value="$dicCache.getNameByMarkAndVal('XBDM', stuData.sex)"></submit-item> -->
			<!-- <submit-item label="证件号码" :value="stuData.cardnum"></submit-item>
			<submit-item label="培训车型" :value="stuData.traintype"></submit-item>
			<submit-item label="手机号码" :value="stuData.phone"></submit-item> -->
			<submit-item label="类型" :value="form.paymentType=='1'?'押金':'管理费'"></submit-item>
			<submit-item label="总金额" :value="form.contractCost"></submit-item>
			<submit-item label="支付方式" :value="form.paymentMethod=='1'?'支付宝':form.paymentMethod=='2'?'微信':form.paymentMethod=='3'?'现金':form.paymentMethod=='4'?'刷卡':'未知'"></submit-item>
			<submit-item label="起始日期" :value="form.startTime"></submit-item>
			<submit-item label="结束日期" :value="form.endTime"></submit-item>
		</confirm>
	</div>
</template>

<script>
import carSelect from "@/components/car-select";
import confirm from "@/components/income-submit";
import submitItem from "@/components/submit-item";
export default {
  name: "contractfee",
  components: {
    carSelect,
    confirm,
    submitItem
  },
  data() {
    return {
      confirmShow: false,
      carInfor: {}, //存放右侧车辆信息
      // stuData: {},
      form: {
        paymentMethod: "3",
        paymentType: "1",
        contractCost: "",
        contractor: "",
        time: "",
        startTime: "",
        endTime: ""
      },
      rules: {
        contractCost: [
          { required: true, message: "请输入金额", trigger: "blur" }
        ],
        time: [
          { required: true, message: "请选择有效日期", trigger: "change" }
        ],
        contractor: [
          { required: true, message: "请输入经办人", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 日期选择回调 处理返回结果
    handleChange() {
      if (this.time != "") {
        this.form.startTime = this.form.time[0];
        this.form.endTime = this.form.time[1];
      }
    },
    submitForm() {
      //判断是否存在车辆信息
      if (this.carInfor.plateNumber) {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false;
          }
          this.confirmShow = true;
        });
      } else {
        layer.msg("请先查询车辆信息！", {
          shift: 6,
          shade: 0.3
        });
      }
    },
    // 提交
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.carId = this.carInfor.carId;
          this.form.plateNumber = this.carInfor.plateNumber;
          this.$http.post("iem/addContractFee", this.form, d => {
            if (d.status == 1) {
              layer.msg(d.msg);
              layer.msg(
                d.msg,
                {
                  time: 1000,
                  shade: 0.3
                },
                function() {
                  layer.confirm(
                    "是否打印小票？",
                    {
                      title: "打印确认",
                      btn: ["是", "否"]
                    },
                    function() {
                      window.open(
                        process.env.API_BASH_URL + "print/bkf/" + d.data.obj,
                        "_blank",
                        "directories=0,location=0,menubar=0,scrollbars=0,status=0,titlebar=0,toolbar=0"
                      );
                      top.location.reload();
                    },
                    function() {
                      top.location.reload();
                    }
                  );
                }
              );
            } else {
              layer.msg(d.msg, {
                shift: 6
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields();
    },
    // 查询车辆
    selectCarInfor(car) {
      // console.log(JSON.parse(JSON.stringify(car)));
      if (car.carId) {
        this.$http.get("iem/car/getCarFuelCount/" + car.carId, d => {
          if (d.status == 1) {
            this.carInfor = $.extend({}, d.data, car);
          } else {
            layer.msg(d.msg);
          }
        });
      } else {
        layer.msg("请先输入车牌号！", {
          shift: 6,
          shade: 0.3
        });
      }
    },
  }
};
</script>

<style scoped>
.pay-method-time {
  width: 350px !important;
}
.carID {
  width: 70%;
  height: 30px;
  line-height: 30px;
  padding: 6px;
  margin: 70px auto;
  background: url("/static/img/carID-bg.jpg") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.line {
  border-bottom: 1px solid #e9e9e9;
}

.carID-line {
  width: 100%;
  height: 30px;
  border: 1px dotted #fff;
  display: block;
  font-size: 18px;
}

.fresh-date {
  position: absolute;
  bottom: 40px;
  left: 8%;
  color: #b8b8b8;
}

.upload-title {
  width: 100%;
  float: left;
  height: 44px;
  line-height: 44px;
  margin-top: 34px;
  color: #606266;
}

.submit-btnImg {
  margin: 30px auto;
  display: block;
  cursor: pointer;
}
</style>